<template>
  <view class="mine-container">
    <!-- 顶部个人信息 -->
    <!-- <view class="header">
      <view class="user-info">
        <view class="avatar">
          {{ userInfo.nickname }}
        </view>
        <view class="user-detail">
          <text class="nickname">{{ userInfo.nickname }}</text>
          <text class="user-id">ID: {{ userInfo.id }}</text>
          <view class="user-tags">
            <text class="tag tag-blue">{{ userInfo.role }}</text>
          </view>
        </view>
      </view>
    </view> -->

    <!-- 数据概览卡片 -->
    <!-- <view class="overview-card">
      <view class="overview-header">
        <text class="overview-title">今日数据概览</text>
      </view>
      <view class="overview-grid">
        <view class="overview-item">
          <text class="item-value">{{ overview.totalGoods }}</text>
          <text class="item-label">总商品</text>
        </view>
        <view class="overview-item">
          <text class="item-value">¥{{ overview.sales }}</text>
          <text class="item-label">今日销售额</text>
        </view>
        <view class="overview-item">
          <text class="item-value">{{ overview.purchase }}</text>
          <text class="item-label">今日进货数</text>
        </view>
      </view>
    </view> -->

    <!-- 功能列表 -->
    <view class="function-list">
      <!-- 业务功能 -->
      <view class="function-card">
        <text class="card-title">业务功能</text>
        <view class="business-grid">
          <view v-for="(item, index) in businessFunctions" 
                :key="index"
                class="business-item"
                @click="handleFunctionClick(item)">
            <image :src="item.icon" class="function-icon" mode="aspectFit"/>
            <text class="item-name">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能列表 -->
    <!-- <view class="function-list">
      业务功能
      <view class="function-card">
        <text class="card-title">元数据设置</text>
        <view class="business-grid">
          <view v-for="(item, index) in metaDataSettings" 
                :key="index"
                class="business-item"
                @click="handleFunctionClick(item)">
            <image :src="item.icon" class="function-icon" mode="aspectFit"/>
            <text class="item-name">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view> -->

    <!-- 输入框示例 -->
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog ref="inputClose"  mode="input" @close="handleClose" :before-close="true" title="输入预警值" value="对话框预置提示内容!"
        placeholder="请输入预警值" @confirm="dialogInputConfirm"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { userApi } from '@/api/user'
import { recordApi } from '@/api/record'

// 用户信息
const userInfo = uni.getStorageSync('userInfo')

// 数据概览
const overview = ref({
  totalGoods: 0,
  sales: 0,
  purchase: 0
})

// 获取今日数据概览
const getOverview = async () => {
  try {
    const res = await recordApi.getOverview()
    overview.value = {
      totalGoods: res.totalGoods,
      sales: formatNumber(res.sales),
      purchase: res.purchase
    }
  } catch (error) {
    console.error('获取数据概览失败:', error)
  }
}

// 格式化数字
const formatNumber = (num) => {
  if (!num) return '0'
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toString()
}

// 业务功能
const businessFunctions = ref([
  // {
  //   name: '添加商品',
  //   icon: '/static/icons/tianjiashangpin.png',
  //   path: '/pages/goods/add'
  // },
  {
    name: '销售信息',
    icon: '/static/icons/xiaoshoujilu.png',
    path: '/pages/record/sales'
  },
  {
    name: '进货信息',
    icon: '/static/icons/jinhuojilu.png',
    path: '/pages/record/purchase'
  },
  // 只有特定用户才能看到人员权限设置
  ...(uni.getStorageSync('userInfo').openid === 'o5Nph7O-nTFL5F5c9_hWRyaVI_sA' ||
      uni.getStorageSync('userInfo').openid === 'o5Nph7OuWcpHrOIZ_DF1tWsDu0OY' ? [{
    name: '人员权限设置',
    icon: '/static/icons/moban.png',
    path: '/pages/settings/permission/index'
  }] : []),
  {
    name: '添加进货公司',
    icon: '/static/icons/gongyingshang.png',
    path: '/pages/settings/supplier/index'
  },
  // {
  //   name: '数据报表',
  //   icon: '/static/icons/xiaoshoubaobiao.png',
  //   path: '/pages/report/sales'
  // }
])

// // 元数据设置
// const metaDataSettings = ref([

//   {
//     name: '添加预警值',
//     icon: '/static/icons/yujingzhi.png',
//     path: '/pages/settings/warning/index'
//   }
// ])

const inputDialog = ref()
// 处理功能点击
const handleFunctionClick = (item) => {
  if (item.path === '/pages/settings/warning/index') {
    inputDialog.value.open()
  } else {
    uni.navigateTo({
    url: item.path
  })
  }
}

// 处理预警值输入确认
const dialogInputConfirm = async (val) => {
  // 验证输入是否为数字
  const num = Number(val)
  if (isNaN(num) || num <= 0) {
    uni.showToast({
      title: '请输入有效数字',
      icon: 'none',
      duration: 2000
    })
    return
  }

  // 保存预警值
  await userApi.putwarningNum({warningNum: num})
  uni.setStorageSync('warningValue', num)
  inputDialog.value.close()
  // 提示成功
  uni.showToast({
    title: '设置成功',
    icon: 'success',
    duration: 2000
  })
}
// 处理弹窗关闭
const handleClose = () => {
  inputDialog.value.close()
}

onMounted(() => {
  getOverview()
})
</script>

<style>
.mine-container {
  min-height: 100vh;
  background-color: #fff;
  padding-top: var(--status-bar-height);
}

/* 头部样式 */
.header {
  padding: 0 24px;
  background-color: #fff;
}

.header-top {
  margin-bottom: 24px;
}

.page-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  background: url('/static/images/avatar.jpg') no-repeat center center;
  background-size: cover;
  /* border-radius: 16px; */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
  border-radius: 50%;
}

.user-detail {
  flex: 1;
}

.nickname {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.user-id {
  color: #666;
  margin-top: 4px;
  display: block;
}

.user-tags {
  margin-top: 8px;
}

.tag {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.tag-blue {
  background-color: #e6f7ff;
  color: #1890ff;
}

/* 数据概览卡片 */
.overview-card {
  margin: 0 16px;
  margin-top: 16px;
  background-color: #1890ff;
  border-radius: 16px;
  padding: 16px;
  color: white;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
}

.overview-header {
  margin-bottom: 16px;
}

.overview-title {
  font-size: 14px;
  opacity: 0.9;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.overview-item {
  text-align: left;
}

.item-value {
  font-size: 24px;
  font-weight: bold;
  display: block;
}

.item-label {
  font-size: 12px;
  opacity: 0.9;
  margin-top: 4px;
  display: block;
}

/* 功能列表 */
.function-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.function-card {
  background-color: white;
  border-radius: 16px;
}

.card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  display: block;
}

/* 业务功能网格 */
.business-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.business-item {
  background-color: #f5f5f5;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.function-icon {
  width: 32px;
  height: 32px;
}

.item-name {
  font-size: 14px;
  color: #333;
}

/* 退出登录按钮 */
.logout-btn {
  width: 100%;
  padding: 16px;
  background-color: white;
  color: #ff4d4f;
  font-weight: 500;
  border: none;
  border-radius: 16px;
  margin-top: 16px;
}

.logout-btn:hover {
  background-color: #fff1f0;
}
</style> 